map = new AMap.Map('map', {
  // zoom: 9.5,
  // center: [112.85000, 36.392438],
  center: [112.978606,36.867027],
  zoom: 11,
  pitch: 50,
  mapStyle: "amap://styles/grey",
  viewMode: '3D',
});
loca = new Loca.Container({
  map,
});

function addPolygon(data) {
  let polygon = new AMap.Polygon({
      path: data,
      fillColor: '#ccebc5',
      strokeOpacity: 1,
      fillOpacity: 0,
      strokeColor: '#5341fd',
      strokeWeight: 2,
      strokeStyle: 'dashed',
      strokeDasharray: [5, 5],
  });
  map.add(polygon);
}
addPolygon(wuxiang);

// AMap.plugin([
//     'AMap.ControlBar',
// ], function () {
//     map.addControl(new AMap.ControlBar({
//         position: {
//             right: '420rem',
//             bottom: '180rem'
//         },
//         showControlButton: true,
//     }));
// });
// AMap.plugin([
//     'AMap.ToolBar',
// ], function () {
//     map.addControl(new AMap.ToolBar({
//         position: {
//             right: '450rem',
//             bottom: '90rem'
//         },
//     }));
// });
var hotItem = document.getElementById("hot-con_table_container"); // 热门事项列表滚动区域元素
var hotItemCon = document.getElementById("hotCon"); // 热门事项列表元素
var hotItemSpeed = 50; // 热门事项滚动速度
$(function () {
  // 办件统计
  getTransactNumber();
  // 帮办员统计
  getHelpPeopleNumber();
  // 接件统计
  getAcceptCountNumber();
  // 帮办事项统计
  getHelpItemNumber();
  // 热门事项列表
  getHotItemListData();
  // 各乡镇帮办量统计
  getPerTownHelpNumber();
  // 接件统计图表
  getAcceptCountData();
});
// 办件统计
function getTransactNumber() {
  let noDo = document.getElementById("noDoNum"); //当前未完成工单
  let allHelpNum = document.getElementById("allHelpNum"); //累计帮办
  let goodHelpNum = document.getElementById("goodHelpNum"); // 好评办件
  $.ajax({
    url: url + "/api/v1/deputy/statistics/deputyApplayStatistics",
    type: "get",
    headers: headers,
    success: function (data) {
      if (data.success) {
        valueFlash(noDo, data.data.processing, 1);
        valueFlash(allHelpNum, data.data.complete, 1);
        valueFlash(goodHelpNum, data.data.complete, 1);
      }
    },
  });
}
// 帮办员统计
function getHelpPeopleNumber() {
  let onTask = document.getElementById("onTask"); //帮办员任务中
  let onLeisure = document.getElementById("onLeisure"); //帮办员空闲
  let allHelpPeople = document.getElementById("allHelpPeople"); //帮办员总数
  $.ajax({
    url: url + "/api/v1/deputy/statistics/deputyPersonStatistics",
    type: "get",
    headers: headers,
    success: function (data) {
      if (data.success) {
        valueFlash(onTask, data.data.RWZBBY, 1);
        valueFlash(onLeisure, data.data.KXBBY, 1);
        valueFlash(allHelpPeople, data.data.BBYZS, 1);
      }
    },
  });
}
// 接件统计
function getAcceptCountNumber() {
  let countYesterdayNum = document.getElementById("countYesterdayNum"); //接件昨天
  let countWeekNum = document.getElementById("countWeekNum"); //近一周
  let countMonthNum = document.getElementById("countMonthNum"); //近一月
  $.ajax({
    url: url + "/api/v1/deputy/statistics/deputyAcceptStatistics",
    type: "get",
    headers: headers,
    success: function (data) {
      if (data.success) {
        valueFlash(countYesterdayNum, data.data.ZRJJ, 1);
        valueFlash(countWeekNum, data.data.JYZJJ, 1);
        valueFlash(countMonthNum, data.data.JYYJJ, 1);
      }
    },
  });
}
//帮办事项统计
function getHelpItemNumber() {
  let helpItemNum = document.getElementById("helpItemNum"); //帮办事项总数
  $.ajax({
    url: url + "/api/v1/deputy/statistics/deputyItemStatistics",
    type: "get",
    headers: headers,
    success: function (data) {
      if (data.success) {
        valueFlash(helpItemNum, data.data.COUNT, 1);
      }
    },
  });
}
// 热门事项列表
function getHotItemListData() {
  var hotCaotainer = document.getElementById("hotCon");
  $.ajax({
    url: url + "/api/v1/deputy/statistics/hotDeputyItemStatistics",
    type: "get",
    headers: headers,
    success: function (data) {
      if (data.success) {
        var str = "";
        data.data.forEach(function (item, index) {
          str += "<tr>";
          if (index < 9) {
            str +=
              '<td style="width: 20%;font-style: italic;">0' +
              (index + 1) +
              "</td>";
          } else {
            str +=
              '<td style="width: 20%;font-style: italic;">' +
              (index + 1) +
              "</td>";
          }
          str +=
            '<td style="text-align:left;width: 60%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">' +
            item.SXMC +
            "</td>" +
            '<td style="width: 20%;text-align:left;">' +
            item.COUNT +
            "</td>" +
            "</tr>";
        });
        hotCaotainer.innerHTML = str;
        hotItemListRoll();
      }
    },
  });
}
// 停止滚动
function hotItemListRollStop() {
  if (hotItem.scrollTop >= hotItemCon.scrollHeight / 2) {
    hotItem.scrollTop = 0;
    hotItem.scrollTop = hotItem.scrollTop - hotItemCon.scrollHeight / 2;
  } else {
    hotItem.scrollTop++;
  }
}
// 热门事项滚动事件
function hotItemListRoll() {
  hotItemCon.innerHTML += hotItemCon.innerHTML; // 列表数据复制实现循环滚动
  hotItem.scrollTop++;
  hotItemTimer = setInterval(hotItemListRollStop, hotItemSpeed);
}
// 鼠标移入
hotItem.onmouseover = function () {
  clearInterval(hotItemTimer);
};
// 鼠标移除
hotItem.onmouseout = function () {
  hotItemTimer = setInterval(hotItemListRollStop, hotItemSpeed);
};
// 获取各乡镇帮办量数据
var thermodynamicChartData = {
  type: "FeatureCollection",
  features: [],
};
function getPerTownHelpNumber() {
  $.ajax({
    url: url + "/api/v1/deputy/statistics/deputyApplayByRegion",
    type: "get",
    headers: headers,
    success: function (data) {
      if (data.success) {
        for (var i = 0; i < data.data.length; i++) {
          thermodynamicChartData.features.push({
            type: "Feature",
            geometry: {
              type: "Point",
              name: data.data[i].QHMC,
              coordinates: [
                Number(data.data[i].ZB.split(",")[0]),
                Number(data.data[i].ZB.split(",")[1]),
              ],
            },
            properties: {
              count: data.data[i].BJSL,
            },
          });
        }
        setPerTownData(data.data);
        setThermodynamicChart(thermodynamicChartData);
      }
    },
  });
}
// 帮办量热力图
function setThermodynamicChart(data){
  var heatmap = new Loca.HeatMapLayer({
    zIndex: 10,
    opacity: 1,
    visible: true,
    zooms: [2, 22],
  });
  var geo = new Loca.GeoJSONSource({
    data,
  });
  heatmap.setSource(geo, {
    radius: 5000,
    unit: "meter",
    // height: 1000,
    difference: true,
    gradient: {
      1: "#FF4C2F",
      0.8: "#FAA53F",
      0.6: "#FFF100",
      0.5: "#7DF675",
      0.4: "#5CE182",
      0.2: "#29CF6F",
    },
    value: function (index, feature) {
      return feature.properties.count;
    },
    opacity: [0, 0.8],
    heightBezier: [0, 0.53, 0.37, 0.98],
  });
  loca.clear()
  loca.add(heatmap);
}
// 各乡镇帮办量图标
const townHelpImgList = [
  "./images/index/paiming_1.png",
  "./images/index/paiming_2.png",
  "./images/index/paiming_3.png",
  "./images/index/paiming_4.png",
  "./images/index/paiming_5.png",
  "./images/index/paiming_6.png",
  "./images/index/paiming_7.png",
  "./images/index/paiming_8.png",
  "./images/index/paiming_9.png",
  "./images/index/paiming_10.png",
  "./images/index/paiming_11.png",
  "./images/index/paiming_12.png",
];
// 渲染各乡镇帮办量图表
function setPerTownData(data) {
  var myTownHelpChart = echarts.init(document.getElementById("townHelpCount"));
  var option = {
    tooltip: {
      show: true,
      trigger: "item",
      padding: [8, 15],
      backgroundColor: "rgba(12, 51, 115,0.8)",
      borderColor: "rgba(3, 11, 44, 0.5)",
      textStyle: {
        color: "rgba(255, 255, 255, 1)",
      },
    },
    legend: {
      show: false,
    },
    grid: {
      left: "90",
      right: "16%",
      top: "0%",
      bottom: "0%",
    },
    xAxis: [
      {
        splitLine: {
          show: false,
        },
        type: "value",
        show: false,
      },
    ],
    yAxis: [
      {
        splitLine: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        type: "category",
        axisTick: {
          show: false,
        },
        inverse: true,
        data: data.map((item) => item.QHMC),
        axisLabel: {
          color: "#fff",
          fontSize: 12,
          margin: 10,
          formatter: function (value, index) {
            return `{img${index}|}{value|${value}}`;
          },
          rich: {
            value: {
              width: 55,
            },
            img0: {
              width: 24,
              height: 16,
              backgroundColor: {
                image: townHelpImgList[0],
              },
            },
            img1: {
              width: 24,
              height: 16,
              backgroundColor: {
                image: townHelpImgList[1],
              },
            },
            img2: {
              width: 24,
              height: 16,
              backgroundColor: {
                image: townHelpImgList[2],
              },
            },
            img3: {
              width: 24,
              height: 16,
              backgroundColor: {
                image: townHelpImgList[3],
              },
            },
            img4: {
              width: 24,
              height: 16,
              backgroundColor: {
                image: townHelpImgList[4],
              },
            },
            img5: {
              width: 24,
              height: 16,
              backgroundColor: {
                image: townHelpImgList[5],
              },
            },
            img6: {
              width: 24,
              height: 16,
              backgroundColor: {
                image: townHelpImgList[6],
              },
            },
            img7: {
              width: 24,
              height: 16,
              backgroundColor: {
                image: townHelpImgList[7],
              },
            },
            img8: {
              width: 24,
              height: 16,
              backgroundColor: {
                image: townHelpImgList[8],
              },
            },
            img9: {
              width: 24,
              height: 16,
              backgroundColor: {
                image: townHelpImgList[9],
              },
            },
            img10: {
              width: 24,
              height: 16,
              backgroundColor: {
                image: townHelpImgList[10],
              },
            },
            img11: {
              width: 24,
              height: 16,
              backgroundColor: {
                image: townHelpImgList[11],
              },
            },
            img12: {
              width: 24,
              height: 16,
              backgroundColor: {
                image: townHelpImgList[12],
              },
            },
          },
        },
      },
      {
        type: "category",
        inverse: true,
        axisTick: "none",
        axisLine: "none",
        show: true,
        axisLabel: {
          textStyle: {
            color: "#fff",
            fontWeight: 700,
          },
          formatter: function (value) {
            return value;
          },
        },
        data: data.map((item) => item.BJSL),
      },
    ],
    series: [
      {
        name: "帮办量",
        type: "bar",
        barWidth: 3, // 柱子宽度
        MaxSize: 0,
        showBackground: true,
        backgroundStyle: {
          color: "rgba(255, 255, 255, 0.1)",
        },
        label: {
          show: false,
        },
        data: data.map((item, index) => {
          return {
            name: item.QHMC,
            value: item.BJSL,
            itemStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 1,
                y2: 1,
                colorStops: [
                  {
                    offset: 1,
                    color: "rgba(0, 146, 255, 1)",
                  },
                  {
                    offset: 0,
                    color: "rgba(0, 58, 255, 0)",
                  },
                ],
              },
            },
          };
        }),
      },
      {
        name: "外圆",
        type: "scatter",
        emphasis: {
          scale: false,
        },
        symbol: "circle",
        symbolSize: [5, 5],
        itemStyle: {
          color: "#FFF",
          shadowColor: "#0092FF",
          shadowBlur: 5,
          borderWidth: 1,
          opacity: 1,
          borderColor: "#0092FF",
        },
        z: 2,
        data: data,
        animationDelay: 500,
      },
    ],
  };
  myTownHelpChart.setOption(option);
}
// 接件统计图表数据
function getAcceptCountData() {
  var xData = []; // 日期数据
  var yData = []; // 接件数量
  $.ajax({
    type: "get",
    headers: headers,
    url: url + "/api/v1/deputy/statistics/lastFiveDaysDeputyAccept",
    success: function (data) {
      if (data.success) {
        for (var i = 0; i < data.data.length; i++) {
          xData.push(data.data[i].RQ);
          yData.push(data.data[i].COUNT);
        }
        setAcceptChart(xData, yData);

      }
    },
    error: function (err) {
    },
  });
}
// 接件统计图表渲染
function setAcceptChart(xData, yData) {
  var myAcceptChart = echarts.init(document.getElementById("accpetChart"));
  var option = {
    color: ["#0092FF"],
    tooltip: {
      trigger: "axis",
    },
    legend: {
      show: false,
      textStyle: {
        color: "#fff",
      },
      top: 0,
    },
    grid: {
      top: "20%",
      right: "20",
      left: "10%",
      bottom: "30",
    },
    xAxis: [
      {
        type: "category",
        data: xData,
        axisLine: {
          lineStyle: {
            color: "#fff",
          },
        },
        axisLabel: {
          margin: 10,
          interval: 0,
          rotate: 35,
          textStyle: {
            fontSize: 12,
            fontFamily: "Microsoft YaHei",
            fontWeight: 400,
            color: "#fff",
          },
        },
        axisTick: {
          show: false,
        },
      },
    ],
    yAxis: [
      {
        show: true,
        name: "台",
        axisLabel: {
          formatter: "{value}",
          color: "#6C8097",
        },
        axisLine: {
          show: false,
        },
        splitLine: {
          lineStyle: {
            color: "rgba(255,255,255,0.12)",
          },
        },
      },
    ],
    series: [
      {
        name: "接件",
        type: "line",
        smooth: true,
        symbolSize: 1,
        symbol: "circle",
        data: yData,
        areaStyle: {
          color: "rgba(0, 146, 255, 0.2)",
        },
      },
    ],
  };
  myAcceptChart.setOption(option);
}
